<template>
  <view class="page">
    <img mode="widthFix" class="bg" src="https://jifen.muziyueyueniao.top/img/bg3.png" alt="" />
    <img class="join_group" src="../static/Join_group.png" mode="aspectFill" />
    <img class="join_qq_group" src="../static/join_qq_group.png" mode="aspectFill" />

    <img class="join_group" src="../static/Join_group.png" mode="aspectFill" />

    <view class="content-box flex flex-col">
      <!-- 助力 -->
      <view class="help-box">
        <view class="help flex items-center flex-wrap-warp">
          <view class="item flex justify-center items-center" v-for="item1 in assistanceImgs">
            <image class="img" src="{{ item1 }}" alt="" />
          </view>
          <view class="item add flex justify-center items-center">
            <image class="img" src="../static/add.svg" />
          </view>
        </view>
        <view class="help-box-button flex">
          <img class="bg" src="../static/button-bg.jpg" alt="" />
          <view v-if="acceptPrize">
            <button class="des flex justify-center items-center" bindtap="lingqu">领取奖品</button>
          </view>
          <template v-else>
            <button
              open-type="getUserInfo"
              bindgetuserinfo="shareStart"
              class="des flex justify-center items-center"
              v-if="!isLogin"
            >
              邀请好友助力
            </button>
            <button open-type="share" class="des flex justify-center items-center" v-else>
              邀请好友助力～
            </button>
          </template>
        </view>
      </view>
      <!-- 活动规则 -->
      <view class="rule-box flex flex-col">
        <view class="title">活动规则</view>
        <view class="rule flex flex-col">
          <view class="item" v-for="item in guize">
            {{ item }}
          </view>
        </view>
      </view>
    </view>

    <!-- 使用自定义组件 -->
    <!-- <custom-modal id="modal" bindconfirm="onModalConfirm"></custom-modal> -->
  </view>
</template>

<script lang="ts">
import { Button } from 'vant'
import { settingGet } from '@/api/setting'
export default {
  name: 'home',
  components: {
    [Button.name]: Button
  },
  data() {
    return {
      title: 'Hello',
      isLogin: false,
      guize: [],
      code: '', //传入的需要助力的code
      shareCode: '', //当前用户的分享 code
      assistanceImgs: [], //助力人员头像
      qqMember: false, //是否可以领取qq会员
      acceptPrize: false //是否可以领取奖品
    }
  },
  mounted() {
    this.guize1()
    console.log(this.$myGlobalMethod())
  },
  methods: {
    guize1() {
      let _ = this
      settingGet({ id: '1' })
        .then((res) => {
          let jsonObject = JSON.parse(res.content)
          this.guize = JSON.parse(res.content)
        })
        .catch((err) => {
          //取消请求后会执行该方法
          console.log(err)
        })
    }
  }
}
</script>

<style scoped>
.page {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  height: 100vh;
  margin: 0;
  padding: 0;
}
.page {
}
.bg {
  width: 750px;
  height: 100vh; /* 视口高度 */
}
.content-box {
  position: absolute;
  left: 0;
  /* top: 600px; */
  right: 0;
  padding: 32px;
  bottom: 100px;
}
.help-box {
  background: #1c2432;
  padding: 32px;
  border-radius: 16px;
  margin-bottom: 32px;
}
.help {
  margin-bottom: 32px;
}
.help .item {
  margin-right: 10px;
  margin-top: 10px;
  width: 64px;
  height: 64px;
  border: 4px solid #b7a26c;
  box-sizing: border-box;
  border-radius: 60px;
}
.help .item:last-child {
  margin-right: 0;
}
.help .item .img {
  width: 50px;
  height: 50px;
  border-radius: 60px;
}
.help .item.add {
  border: 4px dashed #b7a26c;
}
.help .item.add .img {
  width: 60px;
  height: 60px;
}
.help-box .help-box-button {
  position: relative;
  height: 80px;
}
.help-box .help-box-button .bg {
  width: 622px;
  height: 80px;
  border-radius: 8px;
}
.help-box .help-box-button .des {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  height: 80px;
  border: 0;
  font-weight: 700;
  font-size: 32px;
  color: #fff;
  background: none;
}
/* 活动规则 */
.rule-box {
  background: #1c2432;
  padding: 32px;
  border-radius: 16px;
  color: white;
}
.rule-box .title {
  font-weight: 700;
  text-align: center;
  font-size: 36px;
}
.rule-box .rule {
  margin-top: 32px;
}
.rule-box .rule .item {
  font-size: 32px;
  line-height: 60px;
}

.join_group {
  position: fixed;
  top: 417px;
  right: 33px;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.4);
  padding: 20px;
  z-index: 9999;
}
.join_qq_group {
  position: fixed;
  top: 259px;
  right: 33px;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.4);
  padding: 20px;
  z-index: 9999;
}
</style>
